<template>
  <div class="login">
    <div class="header">

    </div>
    <div class="coupon">
      <img src="../../assets/images/toubao/coupon.png" >
      <img src="../../assets/images/toubao/youhui.png" style="width: 39%;
    position: absolute;
    top: 28%;
    left: 56%;" @click="showyouhui">
    </div>
    <div class="bottomarea">
    <div class="contact">
         <div class="contact_title">请输入联系信息</div>
         <div class="item_title">公司名称<span class="rq">*</span></div>
         <van-field
    v-model="companyname"
    clearable
    placeholder="请输入"
  />

  <div class="item_title">姓名<span class="rq">*</span></div>
  <van-field
    v-model="username"
    clearable
    placeholder="请输入"
  />

  <div class="item_title">手机号码<span class="rq">*</span></div>
  <van-field
    v-model="phone"
    clearable
    placeholder="请输入"
  />
  <van-button @click="save" round class="tijiaobtn">提交并免费领取</van-button>
  <div class="bz">您所提交的信息仅用于本次优保与您联系，优保将严格保护信息隐私，
也不会进行任何未经预约的联络。</div>
    </div>
    <div style="height:40px"></div>
    </div>
    <div class="baoxian"><img src="../../assets/images/toubao/baoxian.png" style="width: 100%;"></div>

    <!-- <div class="input-wrapper">
      <input
        class="input"
        name="phone"
        type="number"
        v-model="phone"
        placeholder="请输入手机号码"
      />
    </div>
    <div class="label code">验证码</div>
    <div class="input-wrapper">
      <input
        class="input"
        type="text"
        placeholder="请输入手机验证码"
        v-model="code"
      />
      <div
        class="btn-code"
        @click="countDown"
      >{{content}}</div>
    </div>

    <div
      class="btn-submit"
      @click="submit"
    >登录</div> -->
    <van-popup
     round 
     closeable
    v-model="show" 
    :style="{ height: '20%',width:'90%' }">
    <div class="content">
      <p></p>
     本优惠券为优保按照承保的保险公司标准报价之上，额外为客户向保险公司协商的价格优惠。详细使用规则请在提交信息后，咨询优保业务人员。

    </div>
    </van-popup>
  </div>
</template>

<script>
import Vue from 'vue';
import { Field, Button } from 'vant';
import { Popup } from 'vant';
import { Icon } from 'vant';
import { weixinshare,addpossiblemember} from '@/api/policy'

Vue.use(Icon);

Vue.use(Popup);

Vue.use(Field);
Vue.use(Button);

export default {
  name: 'login',
  data () {
    return {
      companyname:'',
      username:'',
      content: '发送验证码',
      totalTime: 59,
      canClick: true,
      phone: null,
      code: null,
       show: false,
       form:{},
    }
  },
  beforeMount(){
document.title='优保双十二'
  },
  mounted(){
    this.wxShare();
  },
  methods: {
   // 判断是否为手机号
  isPoneAvailable (pone) {
    var myreg = /^[1][3,4,5,6,7,8,9][0-9]{9}$/;
    if (!myreg.test(pone)) {
      return false;
    } else {
      return true;
    }
  },
    save(){
      if(!this.companyname)
      {
        this.$toast('公司名称未输入')
         return;
      }
      if(!this.username)
      {
        this.$toast('姓名未输入')
         return;
      }
if(!this.phone)
      {
        this.$toast('手机号未输入')
        return;
      }



       var reg = /^[\u4E00-\u9FA5\uf900-\ufa2da-zA-z•s]{2,20}$/;    
        if(!this.companyname||(this.companyname+'').match(reg)==null)
        {
          this.$toast('公司名称有误')
           return;
        }
        if(!this.username||(this.username+'').match(reg)==null)
        {
          this.$toast('姓名有误')
           return;
        }


        if(!this.isPoneAvailable(this.phone))
        {
          this.$toast('手机号有误')
           return;
        }

      this.form.companyname=this.companyname;
      this.form.manname=this.username;
      this.form.username=this.companyname;
      this.form.phone=this.phone;
      this.$loadingshow();
    addpossiblemember(this.form).then(res => {
         this.$loadingclose();
        if (res.code == 200) {
             this.$toast('领取成功,优保专业顾问将在24小时内与您联系。优保服务热线:400-001-0182')
             this.username='';
             this.phone='';
             this.companyname='';
           this.form={};
          
           //   document.getElementsByClassName('el-table__body-wrapper')[0].style.height='auto';
        } 
        else{
          this.$toast(res.message)
        }
      });
    },
    navtype(){
    var typ='';
    var u = navigator.userAgent;
  if (u.indexOf('Android') > -1 || u.indexOf('Linux') > -1) {//安卓手机
    typ='a';
  } else if (u.indexOf('iPhone') > -1) {//苹果手机
    typ='i';
  } else if (u.indexOf('Windows Phone') > -1) {//winphone手机
    typ='w';
  }
  return typ;

},
  // 判断是否为微信浏览器
  typed() {
    var ua = window.navigator.userAgent.toLowerCase()
    // mozilla/5.0 (iphone; cpu iphone os 9_1 like mac os x) applewebkit/601.1.46 (khtml, like gecko)version/9.0 mobile/13b143 safari/601.1
    if (ua.match(/MicroMessenger/i) == 'micromessenger') {
      return true
    } else {
      return false
    }
  },
  // 全局注册分享函数
 wxShare(title, desc, link, imgUrl) {
  // 获取签名
  var signurl=location.href;
  if(this.navtype()=='i')
               {
                 signurl=sessionStorage.getItem("initLink");
               }
               
      console.log("now signurl:"+signurl)
  weixinshare({
    itemid: 19890708,
    token: window.sessionStorage.getItem("token"),
    jsapi_ticket_url: signurl,
    appname:'XINYI'
  }).then((res) => {
   
    if (res.code === 200) {
      wx.config({
        debug: false,
        appId: res.result.appId, // 必填，公众号的唯一标识
        timestamp: res.result.timeStamp, // 必填，生成签名的时间戳
        nonceStr: res.result.nonceStr, // 必填，生成签名的随机串
        signature: res.result.signature, // 必填，签名，见附录1
        jsApiList: ["onMenuShareTimeline", "onMenuShareAppMessage"] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
      });
    } else if (res.code === CODE_ERR) {
      console.log("获取accessToken失败");
    }
  }).catch((res) => {
    console.log(res)
    // window.alert('网络异常,登录请求失败');
  });
  wx.ready(function () {
  
          var copy_content =  "http://crm.zhiyuewulian.com/#/share";
             
 
    wx.onMenuShareAppMessage({
      title: "优保健康双十二大促", // 分享标题
      desc: "全国领先的企业自主管理“第六险”服务，百万医疗员工无忧，年底大福利！", // 分享描述
      link: copy_content, // 分享链接
      imgUrl: "http://tests.sodataint.com/image/default/879EDC2F094447239FFFE9C3C65EBA2C-6-2.png", // 分享图标
      type: "", // 分享类型,music、video或link，不填默认为link
      dataUrl: "", // 如果type是music或video，则要提供数据链接，默认为空
      success: function() {
      //   _this.state.showShare2 = false;
      },
      cancel: function() {
      //   _this.state.showShare2 = false;
      },
      fail: function() {
      //   alert("cuowu");
      }
    });
    wx.onMenuShareTimeline({
      title: "优保健康双十二大促", // 分享标题
      desc: "全国领先的企业自主管理“第六险”服务，百万医疗员工无忧，年底大福利！", // 分享描述
      link: copy_content, // 分享链接
      imgUrl: "http://tests.sodataint.com/image/default/879EDC2F094447239FFFE9C3C65EBA2C-6-2.png", // 分享图标
      type: "", // 分享类型,music、video或link，不填默认为link
      dataUrl: "", // 如果type是music或video，则要提供数据链接，默认为空
      success: function() {
      //   _this.state.showShare2 = false;
      },
      cancel: function() {
      //   _this.state.showShare2 = false;
      },
      fail: function() {
      //   alert("cuowu");
      }
    });
  });
} ,
    showyouhui(){
       this.show = true;
    },
    submit () {
      var reg = 11 && /^((13|14|15|17|18)[0-9]{1}\d{8})$/;
      if (this.phone == null) {
        console.log('请输入手机号码')
      }

      if (!reg.test(this.phone)) {
        console.log('手机格式不正确')
      }

      if (this.code == null) {
        console.log('请输出验证码')
      }

      console.log(`验证码是：${this.code},手机号为：${this.phone}`)

      this.$router.push({ path: "/page2"})
    },
    countDown () {
      if (!this.canClick) return

      this.canClick = false
      this.content = this.totalTime + 's后重新发送'
      let clock = window.setInterval(() => {
        this.totalTime--
        this.content = this.totalTime + 's后重新发送'
        if (this.totalTime < 0) {
          window.clearInterval(clock)
          this.content = '重新发送验证码'
          this.totalTime = 10
          this.canClick = true
        }
      }, 1000)
    }
  },
  components: {

  }
}
</script>
<style>
html,
body,
#layout,
.login {
  width: 100%;
  height: 100%;
}
</style>
<style scoped lang="scss">
.mt {
  margin-top: 74px;
}

.login {
  background-image: url("../../assets/images/toubao/bg.png");
  background-position: top center;
  background-size: cover;

  // background-repeat: no-repeat;
}
.bottomarea{
 position: relative;
  width: 100%;
  top:42%;
  background-image: url("../../assets/images/toubao/bg.png");
  background-position:bottom center;
  background-size: cover;
}
.baoxian{
  position: relative;
  width: 100%;
  top:42%;
}
.header {
  padding-top: 68px;
  padding-left: 20px;
  font-size: 24px;
  font-family: PingFangSC-Medium, PingFangSC;
  font-weight: bold;
  color: rgba(0, 0, 0, 1);
  line-height: 33px;
}
.coupon{
  position: relative;
  width: 96%;
  margin: 0 auto;
  top:40%;
    
}

.coupon img{
      width:100%;
    }
.contact{
  position: relative;
  width: 96%;
  margin: 0 auto;
  background: #fff;
  border-radius: 8px;
  top:42%;
  // height: 100px;
  padding: 15px;
  box-shadow: 0 0 6px 6px #fccbd4 inset;
}
.contact_title{
  font-size: 16px;
  font-weight: bold;
  color: #333333;
  text-align: center;
  width: 100%;
  
}
.item_title{
  font-size: 14px;
  color: #333333;

}
/deep/ .van-cell{
      padding: 0.20284rem 0.0;
      margin-bottom: 12px;
}
.rq{
  color: rgb(238, 3, 38);
    margin-left: 4px;
    position: relative;
    bottom: 4px;
}
/deep/ .van-cell:not(:last-child)::after{
  left: 0;
  border-bottom: 0.020284rem solid #f0f0f0;
}
.tijiaobtn{
  text-align: center;
  border: none;
  background: #ed022a;
  color: #fff;
  width:80%;
  position: relative;
  left:10%;
  margin-top:30px;
  font-size: 14px;
  font-weight: bold;
}
.bz{
  font-size: 12px;
  color: #999999;
  margin-top:10px;
}
.content{
  margin:27px;
}

</style>
